<template>
  <div class="table_caozuo">
    <template v-for="(item,index) in btn">
      <el-button
        :key="index"
        @click="handler(index)"
        v-if="item.isShow"
        type="primary"
        style="margin:0 10px 20px 0"
      >{{item.title}}</el-button>
    </template>
    <avue-crud
      ref="crud"
      style="width:100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
    <template slot-scope="scope" slot="indexLabel">
        <span>{{scope.row.$index+(page.current - 1) * page.size + 1}}</span>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button @click="kucunLs(scope.row)" type="text" icon="el-icon-view">库存分配</el-button>
      </template>
    </avue-crud>
    <template>
      <div style="width:100%;position:relative;height:100px">
        <el-pagination
          :page-sizes="[10, 20,30,40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin:2% 0;position:absolute;right:1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
    <el-dialog title="库存流水" :visible.sync="dialogVisible" width="80%">
      <div class="inventoryAllocation_title">
        <span>{{ruleForm.goodsName}}</span>
        <span></span>
        <span>库存数量：</span>
        <span>{{ruleForm.stockNum}}</span>
        <span>已分配库存：</span>
        <span>{{ruleForm.allocated}}</span>
        <span>待分配库存：</span>
        <span>{{number}}</span>
      </div>
      <!-- <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">线上库存</span>
        <div slot="table">
          <div style="margin:10px 5px">
            分配库存数量
            <el-input
              placeholder="请输入大于0的整数"
              v-model="ruleForm.assignedAmount"
              clearable
              :min="0"
               @change="stockNumChange"
              style="width:30%"
            ></el-input>
            已兑换库存数量：
            <span>{{ruleForm.payGoodsNum}}</span>
          </div>
        </div>
      </com-title> -->
      <com-title :styleIng="{margin:'10px 0px 10px 10px'}" :isShow="false">
        <span slot="title">门店库存</span>
        <avue-crud
          ref="crud"
          style="width:100%"
          :data="loadData1"
          :option="tableOption1"
          :table-loading="loading1"
          slot="table"
        >
          <template slot="stockNum" slot-scope="scope">
            <!-- <el-input
              placeholder="请输入分配库存数量"
              v-model="scope.row.stockNum"
              @blur="stockNumChange"
              clearable
              style="width:100%"
              :disabled="!scope.row.disabled"
              class="borderNone"
            ></el-input> -->
            <el-input-number
              v-model="scope.row.stockNum"
              controls-position="right"
              @change="(value)=>stockNumChange(value,scope.row)"
              :disabled="!scope.row.disabled"
              class="borderNone"
              style="width:100%"
            ></el-input-number>
          </template>
          <template slot="menu" slot-scope="scope">
            <el-button @click="sure(scope.row)" type="text" v-if="scope.row.disabled">确定</el-button>
            <el-button @click="edit(scope.row.$index)" type="text" v-if="!scope.row.disabled">编辑</el-button>
            <el-button @click="close(scope.row.$index)" type="text" v-if="scope.row.disabled">取消</el-button>
          </template>
        </avue-crud>
      </com-title>
    </el-dialog>
  </div>
</template>

<script src='./list_table.js'></script>

<style lang="scss">
.table_caozuo {
  margin: 10px 0px;
  .borderNone {
    width: 60%;
    .el-input__inner {
      border: none;
      text-align: center !important;
      background-color: #fff !important;
      color: #000 !important;
    }
  }
}
.inventoryAllocation_title {
  background: #eee;
  padding: 20px 10px;
  span:nth-child(even) {
    //偶数
    padding-right: 60px;
  }
  span:nth-child(odd) {
    //奇数
  }
}
</style>